<style media="print" id="printStyle">
  @media print{
    .head-title {
      color: #f00;
    }
  }
</style>

<section id="bill-tmp">
  <section class="bill-tmp-container">
    <!-- 操作区 -->
    <div class="btn-wrap">
      <div class="pull-left">
          <span>账单模版：</span>
          <div class="pt-line-34" id="accout-st-container">
              <div class="select-ul" id="account-st">
                  <span class="select-name br-4 box-i-shadow">{{selectedTmp.name ? selectedTmp.name : '请选择模版'}}</span>
                  <ul>
                    <li v-for="(item,index) in template" @click="selectTmp(item.id,item.name)">{{item.name}}</li>
                  </ul>
              </div>
          </div>
      </div>
      <div class="pull-right">
        <hl-button type="outline" class="export-btn mr-10">导出PDF</hl-button>
        <hl-button type="primary" @on-click="print">打印</hl-button>
      </div>
    </div>
    <!-- 模版 -->
    <section id="print-content">
      <div class="tmp-preview-wrap" :style="pageStyle">
        <!-- 头部 -->
        <div>
            <div v-for="(item,index) in headPerData" class="preview-Item">
              <div :class="{textLeft:item1.elePosition == 'TL' , textCenter:item1.elePosition == 'TC' , textRight:item1.elePosition == 'TR' ,
                   w50:item1.width == 'w50' , w33:item1.width == 'w33' , w00:item1.width == 'w00' , w100:item1.width == 'w100' ,
                   font12:item1.eleSize == '12', font14:item1.eleSize == '14' , font16:item1.eleSize == '16' , font18:item1.eleSize == '18'
                }"
                  v-for="(item1,index1) in item"
              >
                <span v-if="item1.eleType === 'sys' " style="fontFamily: 'Helvetica Neue' , Helvetica, Arial, sans-serif ">
                  <span class="head-title">{{item1.eleDispName}}:</span>
                  <span class="head-ctx">{{item1.eleVal}}</span>
                </span>
                <span v-if="item1.eleType === 'txt' " style="fontFamily: 'Helvetica Neue' , Helvetica, Arial, sans-serif ">
                  <span class="head-ctx">{{item1.eleValue}}</span>
                </span>
                <span v-if="item1.eleType === 'ph' " style="fontFamily: 'Helvetica Neue' , Helvetica, Arial, sans-serif "></span>
              </div>
            </div>
        </div>
        <!-- 中部 -->
        <div>
          <div class="tbhead">
            <table cellpadding="0" cellspacing="0" width='100%' style="border-top:1px solid #333;">
              <tr>
                <th v-for="(item,index) in tbHead" v-if="item.eleShow == 'Y'">{{item.eleDispName ? item.eleDispName : item.eleName}}</th>
              </tr>
              <tr v-for="(item,index) in tbContent" >
                <td v-for="(item1,index1) in item" v-if="item1.eleShow == 'Y'">{{item1.value | formatUndefined}}</td>
              </tr>
            </table>

          </div>
        </div>
        <!-- 尾部 -->
        <div>
            <div v-for="(item,index) in footerPerData" class="preview-Item">
              <div :class="{textLeft:item1.elePosition == 'TL' , textCenter:item1.elePosition == 'TC' , textRight:item1.elePosition == 'TR' ,
                   w50:item1.width == 'w50' , w33:item1.width == 'w33' , w00:item1.width == 'w00' , w100:item1.width == 'w100' ,
                   font12:item1.eleSize == '12', font14:item1.eleSize == '14' , font16:item1.eleSize == '16' , font18:item1.eleSize == '18'
                }"
                  v-for="(item1,index1) in item"
              >
                <span v-if="item1.eleType === 'sys' ">
                  <span>{{item1.eleDispName}}:</span>
                  <span>{{item1.eleVal}}</span>
                </span>
                <span v-if="item1.eleType === 'txt' ">
                  <span>{{item1.eleValue}}</span>
                </span>
                <span v-if="item1.eleType === 'ph' "></span>
              </div>
            </div>
        </div>
        <!-- 水印图 -->
        <div class="watermark-preview-wrap" v-for="(item,index) in watermarkData">
          <img class="watermark-preview-image" :src="item.url" alt="水印图" :style="watermarkStyle[index]">
        </div>

      </div>
    </section>
  </section>
</section>

<script src="modules/print_template/scripts/bill.js" charset="utf-8"></script>
